<template>
  <div>
    <div style="color: darkorange; font-size: small; height: 30px">
      <el-input v-model="to_labId"
                class="input"
                placeholder="机房"
                style="width: 100px"></el-input>&nbsp;
      <el-input v-model="to_labName"
                class="input"
                placeholder="实验室"
                style="width: 100px"></el-input>&nbsp;
      <template>
        <el-select v-model="to_labType"
                   @change="load()"
                   class="input"
                   clearable
                   style="width: 100px;"
                   placeholder="类型">
          <el-option v-for="item in options"
                     :key="item.value"
                     :label="item.label"
                     :value="item.value">
          </el-option>
        </el-select>
      </template>&nbsp;
      <el-input v-model="to_labEquipment"
                class="input"
                placeholder="设备数量"
                style="width: 100px"></el-input>&nbsp;
      <template>
        <el-select v-model="to_userId"
                   @change="load()"
                   class="input"
                   clearable
                   style="width: 100px;"
                   placeholder="实验员">
          <el-option v-for="item in testOption"
                     :key="item.userId"
                     :label="item.name"
                     :value="item.userId">
          </el-option>
        </el-select>
      </template>&nbsp;
      <el-button class="botton"
                 @click="load()">搜索</el-button>
    </div>
    <div style="margin-top: 8px; margin-bottom: 15px"></div>
    <div class="big">
      <el-table :data="tableData"
                :row-style="{ color: 'darkorange', height: '60px' }"
                fit
                style="width: 100%">
        <el-table-column label="机房"
                         prop="labId"></el-table-column>
        <el-table-column label="实验室"
                         prop="labName"></el-table-column>
        <el-table-column label="类型"
                         prop="labTypeString"></el-table-column>
        <el-table-column label="设备数量"
                         prop="equipment"></el-table-column>
        <el-table-column label="实验员"
                         prop="user.name"></el-table-column>
      </el-table>
    </div>
    <div style="padding: 10px 0; text-align: center">
      <el-pagination :current-page="page"
                     :total="total"
                     background
                     class="white-list-tool"
                     layout="total,prev, pager, next, jumper"
                     @current-change="handleCurrentChange">
      </el-pagination>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      options: [{
        value: '0',
        label: '软件'
      }, {
        value: '1',
        label: '硬件'
      }, {
        value: '2',
        label: '网络'
      }],

      tableData: [],
      total: 0,
      page: 1,

      to_labName: "",
      to_labType: "",
      to_labId: "",
      to_labEquipment: "",
      to_userId: "",

      multipleSelection: [],
      testOption: [],
    };
  },
  methods: {
    load () {
      this.$http
        .post("/lab/1", {
          labId: this.to_labId,
          labName: this.to_labName,
          labType: this.to_labType,
          equipment: this.to_labEquipment,
          userId: this.to_userId,
          page: this.page,
        }).then((res) => {
          if (!res.data.success) { this.$message(res.data.errorMsg) }
          this.tableData = res.data.data;
          this.total = res.data.total
        });
    },
    handleCurrentChange (page) {
      this.page = page;
      this.load();
    },
  },
  created () {
    this.$http.post("/user/notStu", {
      job: 2
    }).then((res) => {
      if (!res.data.success) { this.$message(res.data.errorMsg) }
      else { this.testOption = res.data.data }
    })
    this.load();
  },
};
</script>


<style scoped>
.input3 /deep/ .el-input__inner {
  margin-right: 5px;
  background-color: #525151;
  border: 1px solid darkorange;
  color: darkorange;
  width: 150px;
}

.input /deep/ .el-input__inner {
  background-color: #525151;
  border: 1px solid darkorange;
  color: darkorange;
  width: 100px;
}

.botton {
  color: darkorange;
  background-color: #525151;
  border-color: darkorange;
}

.botton:hover,
.botton:focus {
  background: rgb(255, 200, 133);
  border-color: darkorange;
  color: black;
}

.big {
  border: 1px solid darkorange;
}

::v-deep .el-table th {
  border: 1px solid darkorange !important;
  border-right: none !important;
  border-bottom: none !important;
  background-color: #525151;
}

::v-deep.el-table thead {
  color: darkorange;
  font-weight: 500;
  border: 1px solid darkorange;
}

::v-deep .el-table tr {
  background-color: #525151;
}

::v-deep .el-table td,
.building-top .el-table th.is-leaf {
  border: 1px solid darkorange;
  border-right: none !important;
}

::v-deep .el-table::before {
  border: 1px solid darkorange;
  height: 0;
}

::v-deep .el-table td,
.el-table th {
  text-align: center;
}

.el-input {
  width: 100px;
  margin-bottom: 20px;
}

.el-table {
  border: 1px solid darkorange;
  margin: 0 auto;
  font-size: 15px;
}
</style>